<html>
<head>
	<title>OpenMTurk | OpenMTurk - A Customizable labelling tool</title>

	
	<script type=text/javascript>
	  $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
	</script>

	<!-- Minimal style framework: -->
	<!-- <link href="//mincss.com/entireframework.min.css" rel="stylesheet" type="text/css"> -->
	<!-- Arrows icons: -->
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">


	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">

	<!-- stylesheet imported from HTML5UP-->
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<!--[if lte IE 8]><script src="assets/js/ie/html5shiv.js"></script><![endif]-->

	<!--[if lte IE 8]><link rel="stylesheet" href="assets/css/ie8.css" /><![endif]-->
	<link href="https://fonts.googleapis.com/css?family=Amatica+SC|Assistant|Comfortaa:400,700|Cairo|Gruppo|Hind+Guntur:300|Roboto+Mono" rel="stylesheet"> 
	<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
	<!-- Copy to clipboard -->
	<script src="https://cdn.jsdelivr.net/npm/clipboard@1/dist/clipboard.min.js"></script>


</head>
<body id="body">

 	<!-- ------------------------------------------------------ -->
	<!-- --------------------- NAVBAR ------------------------- -->
 	<!-- ------------------------------------------------------ -->


    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" id="openmturk_title" href="/">OpenMTurk</a>
        </div>

        <div id="navbar" class="collapse navbar-collapse">
			<ul class="nav navbar-nav">
				<li class="active"><a href="/">Labelling tool</a></li>
				<li class="active"><a href="guidelines.html">Guidelines</a></li>
				<li class="active"><a href="documentation.html">Documentation</a></li>
			</ul>
			<ul class="nav navbar-nav navbar-right">
				<li class="active"><a href="http://www.github.com/HichameMoriceau/OpenMTurk/"><img id="github_logo" src="static/asset_images/github_octocat_32.png" alt="HTML5 Icon" style="width:20px;height:20px;"> Github</a></li>
			</ul>
        </div>
      
      </div>
    </nav>



 	<!-- ------------------------------------------------------ -->
	<!-- --------------------- BODY ------------------------- -->
 	<!-- ------------------------------------------------------ -->


    <div class="container">
    	<h1 class="row headers">OpenMTurk <small id="subtitle">Customizable image-labelling tool</small></h1>

<!--
     	<br>

    	<br>
    	<br>

    	Please read the <a href="guidelines.html">guidelines</a> before you start labelling.</p>
-->
    </div>

    <div>
    	<h3 class="headers" id="input_output_header"><center>The drawing board: <small>(<span id='img_name'></span>)</small></center></h3>
    </div>

    <div class="container">
		<div class="row">

			<div class="col-md-6">
				<div><p>Annotator username: <strong><span id="user_id"></span></strong></p></div>
			</div>
			<div class="col-md-2"></div>

			<div class="col-md-4">
				<div id="num_labelled_imgs" class="active">Total number of labelled images: <span id="qty_span"></span> / <span id="total_span"></span></div>
			</div>

		</div>
	</div>

	<div class="container-fluid">
		<div id="main_div">

			<div class="row-fluid">

					
				 	<div id="img_div" class="col-md-7">
						<canvas id="img_canvas">
					        Sorry. Your browser does not support HTML5 canvas element.
					    </canvas>
				 	</div>

				 	<!-- Annotation tools: -->
				    <div id="legend_div" class="col-md-4">
						
						<div class="row-fluid">

					    	<div class="tool_list_items">

						    	<div class="row-fluid">
									<h4>Document category:</h4>
									<ul id="category" class="tool_list_items">
										<!-- category buttons are created here with JQUERY 
										(if specified in the config.json) -->
									</ul>
						    	</div>
				 
						    	<div class="row-fluid">
						    		<div id="orientation_div">
										<!-- orientation buttons are created here with JQUERY 
										(if specified in the config.json) -->
						    		</div>
								</div>

						    	<div class="row-fluid">
						    		<h4>Bounding boxes:</h4>
						    		<ul id="bounding_boxes" class="tool_list_items">
										<!-- bounding box buttons are created here with JQUERY 
										(if specified in the config.json) -->
						    		</ul>
						    	</div>
								
						    		
						    	<!-- Submit/remove buttons: -->
						    	<div class="row-fluid">
							    	<div class="submit_remove_buttons">
							    		<div class="col-md-4">
								    		<div id="reset_div">
									    	</div>
									    </div>

										<div class="col-md-4">
								    		<div id="undo_div">
									    	</div>
									    </div>

									    <div class="col-md-4">
									    	<div id="submit_button">
									    	</div>
							    		</div>
										
							    	</div>
						    	</div>

						    	<div class="row-fluid" id="previous_next_image">
						    		<div class="col-md-12 tool_list_items">
						    			<h4 id="prev_next_header">Change image:</h4>
						    		</div>
						    	</div>

						    	<div class="row-fluid">
						    		<div id="img_navigation" class="col-md-12 tool_list_items">
						    		</div>
						    	</div>

					    	</div>
						</div>

				    </div>

				</div>

			</div>
		</div>
	</div>

	<div class="container-fluid">
		<div class="row-fluid">
			<div>
		    	<h3 class="headers" id="input_output_header"><center>Annotation preview:</center></h3>
		    </div>
		<div/>
	</div>



	<div class="container">
		<div class="row">
			
			<div class="col-md-8">
				<pre id="label_preview_section"></pre>
			</div>


			<div class="col-md-4">

				<div class="row-fluid">
					<button  class="copy_download_buttons" 
							 id="copy_button" 
							 alt="Copy labels to clipboard" 
							 data-clipboard-target="#label_preview_section">
						Copy to clipboard
					</button>
				</div>

				<div class="row-fluid">
					<a id="download_label">
						<button class="copy_download_buttons" 
								 id="download_button" 
								 alt="Download labels">
								 Download
						</button>
					</a>
				</div>

				<div class="row-fluid">
					<a id="download_labels"> 
						<button class="copy_download_buttons" 
								 id="download_all_button" 
								 alt="Download all labels">
							Download all labels
						</button>
					</a>
				</div>
			</div>
		</div>
	</div>



 	<!-- ------------------------------------------------------ -->
	<!-- --------------------- FOOTER ------------------------- -->
 	<!-- ------------------------------------------------------ -->


	<div class="container-fluid">
		<div id="footer">
		    <div class="container">
		        <div class="row">

		            <br>
		            <div class="col-md-12">
		                <center>
			                <img src="http://oi60.tinypic.com/w8lycl.jpg" class="img-circle" alt="the-brains">
			                <br>
			                <h4 class="footertext who_built_this">Who built this?</h4>
			                <p class="footertext"><a href="http://www.hichamemoriceau.com">Hichame Moriceau</a>, <a href="https://www.linkedin.com/in/larissa-tijms-a92041120">Larissa Tijms</a>.</p>
			                <br>
		              	</center>
		            </div>
		            
		            <!-- 
					<div class="col-md-6">
		                <center>
		                  <img src="http://oi60.tinypic.com/2z7enpc.jpg" class="img-circle" alt="...">
		                  <br>
		                  <h4 class="footertext who_built_this">Who edited this?</h4>
		                  <p class="footertext">Check out  profile on <a href="">LinkedIn</a>. <br>
		                </center>
		            </div> -->

		        </div>
		    </div>
		</div>
	</div> 

	<!-- JQuery library: -->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<!-- Bootstrap CSS library: -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
	<!-- Bootstrap JS library -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
	<!-- Bootbox (prompt user for username) -->
	<!-- <script type="text/javascript" src="static/bootbox.min.js"></script> -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
	
	
	<!-- Personal scripts: -->
	<script type="text/javascript" src="{{ main_js }}"></script>
	<link rel="stylesheet" href="{{ main_css }}">
	<!-- <link rel="stylesheet" href="static/scripts/css/style.css" /> -->
</body>
</html>